<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="二维码组件">
        二维码组件使用示例，通常用于一些商品、促销活动、或者分享推广二维码展示
      </a-card>
    </div>
    <div class="mt-3">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <a-card :segmented="{ content: 'hard' }" :bordered="false" size="small" title="基础实例">
            <div align="center" class="qrcode-space">
              <QrCode :value="qrCodeUrl" />
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <a-card
            :segmented="{ content: 'hard' }"
            :bordered="false"
            size="small"
            title="渲染成img标签示例"
          >
            <div align="center" class="qrcode-space">
              <QrCode :value="qrCodeUrl" tag="img" />
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <a-card
            :segmented="{ content: 'hard' }"
            :bordered="false"
            size="small"
            title="配置样式示例"
          >
            <div align="center" class="qrcode-space">
              <QrCode
                :value="qrCodeUrl"
                :options="{
                  color: { dark: '#55D187' },
                }"
              />
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <a-card
            :segmented="{ content: 'hard' }"
            :bordered="false"
            size="small"
            title="本地logo示例"
          >
            <div align="center" class="qrcode-space">
              <QrCode :value="qrCodeUrl" :logo="LogoImg" />
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <a-card
            :segmented="{ content: 'hard' }"
            :bordered="false"
            size="small"
            title="在线logo示例"
          >
            <div align="center" class="qrcode-space">
              <QrCode
                :value="qrCodeUrl"
                :logo="LogoImg"
                :options="{
                  color: { dark: '#55D187' },
                }"
              />
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <a-card
            :segmented="{ content: 'hard' }"
            :bordered="false"
            size="small"
            title="LOGO配置示例"
          >
            <div align="center" class="qrcode-space">
              <QrCode
                :value="qrCodeUrl"
                :logo="{
                  src: LogoImg,
                  logoSize: 0.2,
                  borderSize: 0.05,
                  borderRadius: 50,
                  bgColor: 'blue',
                }"
              />
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <a-card :segmented="{ content: 'hard' }" :bordered="false" size="small" title="下载示例">
            <div align="center" class="qrcode-space">
              <QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
            </div>
            <div align="center" class="qrcode-space">
              <a-button class="mt-3" type="primary" @click="download"> 下载 </a-button>
            </div>
            <div align="center" class="qrcode-space">
              <div class="msg">(在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题)</div>
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <a-card
            :segmented="{ content: 'hard' }"
            :bordered="false"
            size="small"
            title="扩展绘制示例"
          >
            <div align="center" class="qrcode-space">
              <QrCode
                :value="qrCodeUrl"
                :width="200"
                :options="{ margin: 5 }"
                ref="qrDiyRef"
                :logo="LogoImg"
                @done="onQrcodeDone"
              />
            </div>
            <div align="center" class="qrcode-space">
              <a-button class="mt-3" type="primary" @click="downloadDiy"> 下载 </a-button>
            </div>
            <div align="center" class="qrcode-space">
              <div class="msg">要进行扩展绘制则不能将tag设为img</div>
            </div>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <a-card
            :segmented="{ content: 'hard' }"
            :bordered="false"
            size="small"
            title="配置大小示例"
          >
            <div align="center" class="qrcode-space">
              <QrCode :value="qrCodeUrl" :width="280" />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { QrCode, QrCodeActionType } from '@/components/Qrcode/index';
  const qrCodeUrl = 'https://www.naiveadmin.com';
  const LogoImg = 'https://assets.naiveadmin.com/pro/logo.png';

  const qrRef = ref<Nullable<QrCodeActionType>>(null);
  const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);

  function download() {
    const qrEl = unref(qrRef);
    if (!qrEl) return;
    qrEl.download('img');
  }

  function downloadDiy() {
    const qrEl = unref(qrDiyRef);
    if (!qrEl) return;
    qrEl.download('Qrcode');
  }

  function onQrcodeDone({ ctx }: any) {
    if (ctx instanceof CanvasRenderingContext2D) {
      // 额外绘制
      ctx.fillStyle = 'black';
      ctx.font = '16px "微软雅黑"';
      ctx.textBaseline = 'bottom';
      ctx.textAlign = 'center';
      ctx.fillText('扫描关注Star点一点', 100, 195, 200);
    }
  }
</script>

<style lang="less" scoped>
  .qrcode-space {
    position: relative;
    bottom: 0;
    transition: bottom 0.4s;
    &:hover {
      bottom: 6px;
    }
  }
</style>
